export const addNumber = ({map, point}) => {
  let lng = point.lng
  let lat = point.lat 
  let num = point.num

  var icon = new AMap.Icon({
    size: new AMap.Size(25, 34), // 图标尺寸
    image: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
    imageSize: new AMap.Size(25, 34),
  });

  
  let marker = new AMap.Marker({
          icon: icon,
          draggable: true,
          position: [lng, lat],
          anchor: 'bottom-center',
         
      });
      marker.setMap(map);

      

      var text = new AMap.Text({
        text: num,
        anchor: 'center', // 设置文本标记锚点
        draggable: true,
        angle: 0,
        offset: new AMap.Pixel(0, -20),
        style: {
          'text-align': 'center', border: 'none', background: 'transparent', color: '#fff'
        },
        position: [lng, lat],
      });

      text.setMap(map);


      var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
      let content = `<div style="font-size: 18px;">
        ${num}
        <br>
        lng: ${lng} <br> lat: ${lat} <br> isStop: ${point.isStop} <br> supplement: ${point.supplement}
        <br> desc: ${point.columns.desc}
        <br> loc_type: ${point.columns.loc_type}
        <br> locateTime: ${point.locateTime}
        <br> radius: ${point.radius}
        </div>`

      marker.on('click', () => {

        infoWindow.setContent(content);
        infoWindow.open(map, marker.getPosition());
      });
      text.on('click', () => {
      
        infoWindow.setContent(content);
        infoWindow.open(map, marker.getPosition());
      });
}



export const addRealPoint = ({map, points}) => {
  for(let item of points){
      if(item.supplement != 0){
          continue
      }
      let icon = new AMap.Icon({
          size: new AMap.Size(25, 34), // 图标尺寸
          image: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png",
          imageSize: new AMap.Size(25, 34),
      });

      
      let marker = new AMap.Marker({
          icon: icon,
          position: [item.longitude, item.latitude],
          draggable: true,
          anchor: 'bottom-center',
          map
      });

      var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
      let content = `<div style="font-size: 18px;">
      
        <br>
        lng: ${item.longitude} <br> lat: ${item.latitude} <br> isStop: ${item.isStop} <br> supplement: ${item.supplement}
        <br> desc: ${item.columns.desc}
        <br> loc_type: ${item.columns.loc_type}
        <br> locateTime: ${item.locateTime}
        <br> radius: ${item.radius}
        </div>`

      marker.on('click', () => {
     
        infoWindow.setContent(content);
        infoWindow.open(map, marker.getPosition());
      });
  }
}

export const addMarkerText = ({map,lng, lat, text, imgUrl, width, height,extData}) => {
  let _url = "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png"
  let _width = 25
  let _height = 34
  if(imgUrl){
    _url =imgUrl
  }
  if(width){
    _width = width
  }
  if(height){
    _height = height
  }

  let icon = new AMap.Icon({
      size: new AMap.Size(_width, _height), // 图标尺寸
      image: _url,
      imageSize: new AMap.Size(_width, _height),
    });

    
    let marker = new AMap.Marker({
        icon: icon,
        position: [lng, lat],
        anchor: 'bottom-center',
        extData,
        map
    });

    new AMap.Text({
          text: text,
          anchor: 'center', // 设置文本标记锚点
          angle: 0,
          offset: new AMap.Pixel(0, -90),
          style: {
            'text-align': 'center', 'box-shadow': '0 0 5px 0 rgba(0, 0, 0, 0.5)', padding: '5px 10px'
          },
          position: [lng, lat],
          map
      });

      return marker
 }

export const addPolylineFence = ({map, fence}) => {
  let path = fence.vertexes.map(obj => [obj.longitude, obj.latitude])

 
  
  for(let i = 0 ;i < path.length; i++){
    addMarkerText({map,lng:path[i][0], lat:path[i][1], text: i+ 1})
  }
 


  let  polyline = new AMap.Polyline({
    path: path,
    isOutline: true,
    outlineColor: 'red',
    borderWeight: 0,
    strokeColor: "#3366FF",
    strokeOpacity: 1,
    strokeWeight: 6,
    lineJoin: 'round',
    lineCap: 'round',
  
  })
  map.add([polyline]);
  map.setFitView();
}



export const addCircleFence = ({map, fence}) => {
  let circle = new AMap.Circle({
      map: map,
      center: [fence.longitude, fence.latitude], // 圆心位置
      radius: fence.radius, //半径
      strokeColor: '#F33', //线颜色
      strokeOpacity: 1, //线透明度
      strokeWeight: 1, //线粗细度
      fillColor: '#ee2200', //填充颜色
      fillOpacity: 0.35, //填充透明度
    });
    map.add(circle);

    let text = new AMap.Text({
      map: map,
          text: fence.desc,
          anchor: 'center', // 设置文本标记锚点
          offset : [0, -100],
          draggable: true,
          cursor: 'pointer',
          angle: 0,
          style: {
            'background-color': 'white',

            'border-width': 0,
            'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
            'text-align': 'center',
            'font-size': '16px',
          },
          position:  [fence.longitude, fence.latitude],
      });
   
    map.setFitView();
}

export const addPolygonFence = ({map,fence}) => {
  let  path = fence.vertexes.map(p => {
      return [p.longitude, p.latitude]
  })
  let poly = new AMap.Polygon({
      map: map,
      path: path, //设置多边形边界路径
      
      strokeColor: '#EB5B5B', //线颜色
      strokeOpacity: 0.9, //线透明度
      strokeWeight: 1, //线宽
      fillColor: '#FA5151', //填充色
      fillOpacity: 0.5, //填充透明度
    });

   
}



export const addPolyline = ({map, path, color, isFitView}) => {
  let polyPath = path.map((obj) => {
    return [obj.lng, obj.lat];
  });

  var polygon = new AMap.Polyline({
    path: polyPath,
    strokeWeight: 8,
    strokeOpacity: 0.8,
    strokeColor: color,
    showDir: true,
  });

  map.add(polygon);
  if(isFitView){
    map.setFitView();
  }
 
}

export const addTrack = ({map, points}) => {
  
  let supplement = -1
  let list = []
  for(let p of points){
      

      if(supplement == p.supplement){
          list[list.length - 1].push(p)
      } else {
          list.push([])
          list[list.length - 1].push(p)
      }

      supplement = p.supplement
      if(p.isStop){
          list.push([])
      }
  }
  

  let index = 1
  for(let item of list){
      
      if(item.length == 0){
          continue
      }
     
      let path = item.map(obj => {
          return {
              lng: obj.longitude,
              lat: obj.latitude,
              ...obj
          }
      })
     
      let color
      if(item[0].supplement == 0){
           color = 'red'
      } else {
           color = 'blue'
      }
     
      addPolyline({map, path, color, })
      
   
      addNumber({
          map, 
          point: {...path[0], num: index}  
      })
      addNumber({
          map,
          point: {...path[path.length - 1], num: index}
      } )
      index ++
  }

  map.setFitView();

  for(let i = 0; i < list.length -2; i++){
      var a = list[i]
      var b = list[i + 1]
      if(a.length == 0 || b.length == 0){
          continue
      }

      var start = a[a.length - 1]
      var end = b[0]

      if(start.isStop || end.isStop) {
          continue
      }
      start.lng =  start.longitude
      start.lat =  start.latitude

      end.lng =  end.longitude
      end.lat = end.latitude

    
      addPolyline({map, path: [start, end], color: 'red', })
  }
 
 
}


